<template>
	<link rel="stylesheet" href="/assets/css/order.css" />

	<van-tabs v-model:active="active" sticky>
		<van-tab v-for="item in map" :title="item.name" :name="item.value" />
	</van-tabs>

	<!-- 下拉刷新 -->
	<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
		<van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
			<order-card
				v-for="item in data"
				:key="item.id"
				:data="item"
				@cancel="cancelOrder"
				@receive="confirmReceive"
				@express="showExpress"
				@return="applyForReturn"
				@detail="$router.push({ path: '/order/detail', query: { orderid: item.id } })"
				@return-info="fillReturnInfo"
				@comment="goComment" />
		</van-list>
	</van-pull-refresh>
</template>

<script setup>
import { showLoadingToast, closeToast } from 'vant';
const { proxy } = getCurrentInstance();

const business = proxy.$cookies.get('business');

// 映射表
const map = [
	{ name: '全部订单', value: 0 },
	{ name: '已支付', value: 1 },
	{ name: '已发货', value: 2 },
	{ name: '已收货', value: 3 },
	{ name: '已完成', value: 4 },
	{ name: '仅退款', value: -1 },
	{ name: '退款退货', value: -2 },
	{ name: '售后中(待退货)', value: -3 },
	{ name: '退货成功', value: -4 },
	{ name: '退货失败', value: -5 },
];

const data = ref([]);
const active = ref(proxy.$route.query.status ? Number(proxy.$route.query.status) : 0);
const loading = ref(false);
const refreshing = ref(false);
const finished = ref(false);
let count = 0;
let page = 1;
let limit = 8;

// 下拉刷新
const onRefresh = async () => {
	count = 0;
	page = 1;
	finished.value = false;

	data.value = [];

	loading.value = true;

	console.log('refresh');

	onLoad();
};
// 上拉加载
const onLoad = async () => {
	if (refreshing.value) {
		refreshing.value = false;
	}

	console.log('load');

	const bool = await getData();

	loading.value = false;
	refreshing.value = false;

	if (bool) {
		page++;

		if (count > 0 && page * limit > count) {
			finished.value = true;
		}
	} else {
		finished.value = true;
	}
};

const getData = async () => {
	const res = await proxy.$GET({
		url: '/order/index',
		params: { busid: business.id, status: active.value },
	});

	if (res.code === 1) {
		data.value = data.value.concat(res.data);
	}
};
// 取消订单
const cancelOrder = (item) => {
	proxy
		.$confirm({
			title: '取消订单',
			message: '确定取消该订单？',
		})
		.then(async () => {
			console.log(11);
			showLoadingToast({ forbidClick: true });

			const res = await proxy.$POST({
				url: '/order/cancel',
				params: { busid: business.id, orderid: item.id },
			});

			closeToast();

			if (res.code === 0) {
				proxy.$fail(res.msg);
				return;
			}

			proxy.$success(res.msg);
			onRefresh();
		});
};
// 确认收货
const confirmReceive = (item) => {
	proxy
		.$confirm({
			title: '收货提醒',
			message: '确定收货？',
		})
		.then(async () => {
			const res = await proxy.$POST({
				url: '/order/receive',
				params: { busid: business.id, orderid: item.id },
			});

			if (res.code === 0) {
				proxy.$fail(res.msg);
				return;
			}

			proxy.$success(res.msg);
			onRefresh();
		});
};
// 查看物流
const showExpress = (item) => {
	proxy.$router.push({
		path: '/order/express',
		query: { orderid: item.id },
	});
};
// 申请退货
const applyForReturn = (item) => {
	proxy
		.$confirm({
			title: '提醒',
			message: '确定申请退货？',
		})
		.then(async () => {
			const res = await proxy.$POST({
				url: '/order/applyforreturn',
				params: { busid: business.id, orderid: item.id },
			});

			if (res.code === 0) {
				proxy.$fail(res.msg);
				return;
			}

			proxy.$success(res.msg);
			onRefresh();
		});
};
// 填写退货信息
const fillReturnInfo = (item) => {
	proxy.$router.push({
		path: '/order/return',
		query: { orderid: item.id }
	})
}
// 去评价
const goComment = (item) => {
	proxy.$router.push({
		path: '/order/comment',
		query: { orderid: item.id }
	})
}

watch(active, () => {
	onRefresh();
	// console.log(active.value);

	proxy.$router.replace({ query: { status: active.value } })
});
</script>

<style scoped>
.btn-box1 :deep(button) {
	margin-right: 10px;
}
</style>
